@use "sass:color";

$base-color: #1c60a0;

.colors-grid-container.neo-grid-container {
    width: 100%;

    .neo-grid-header-toolbar {
        .neo-grid-header-button {
            &:not(:first-child) {
                width: 10%;
            }
        }
    }

    .neo-grid-row .neo-grid-cell {
        &.color-1 {
            background-color: $base-color;
        }

        &.color-2 {
            background-color: color.adjust($base-color, $lightness: 5%);
        }

        &.color-3 {
            background-color: color.adjust($base-color, $lightness: 10%);
        }

        &.color-4 {
            background-color: color.adjust($base-color, $lightness: 15%);
        }

        &.color-5 {
            background-color: color.adjust($base-color, $lightness: 20%);
        }

        &.color-6 {
            background-color: color.adjust($base-color, $lightness: 25%);
        }

        &.color-7 {
            background-color: color.adjust($base-color, $lightness: 30%);
        }

        &.color-8 {
            background-color: color.adjust($base-color, $lightness: 35%);
        }

        &.color-9 {
            background-color: color.adjust($base-color, $lightness: 40%);
        }

        &.color-10 {
            background-color: color.adjust($base-color, $lightness: 45%);
        }
    }

    .neo-grid-view {
        .neo-grid-row {
            &:hover {
                .neo-grid-cell {
                    background-color: #d0aa72;
                    color           : #2b2b2b;
                }
            }
        }
    }
}
